<template>
	<view class="container password" style="padding: 20rpx;">
		<view class="tit-cen">
			<image  src="../../static/images/return.png" @click="back"></image>
			修改密码
		</view>
		<view class="white-bc">
			<view class="edt_item">
				<image src="../../static/images/pass_2.png"></image>
				<input class="edt uni-input" cursor-spacing="0" maxlength="20" placeholder="请输入原密码" @input="pwdInput" type="password" />
			</view>
			
			<view class="edt_item">
				<image src="../../static/images/pass_2.png"></image>
				<input class="edt uni-input" cursor-spacing="0" maxlength="20" placeholder="请输入新密码" @input="newPwdInput"
				 type="password" />
			</view>
			<view class="edt_item">
				<image src="../../static/images/key.png"></image>
				<input class="edt uni-input" cursor-spacing="0" maxlength="20" placeholder="请再次输入新密码" @input="confirmNewPwdInput"
				 type="password" />
			</view>
			
			 <view class="sure-btn bg-theme f-15" @click="submit">修改密码</view>
		</view>
	</view>
</template>

<script>
	const api = require('@/utils/api.js');
	const util = require("@/utils/util.js");
	var md5Util = require('@/utils/md5.js');
	export default {
		data() {
			return {
				newPass: '',
				confirmNewPass: '',
				oldPass: '',
				userId: '',
				user: {},
				pwdIsHave: false
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			// 原密码输入
			pwdInput(e) {
				this.oldPass = e.detail.value;
			},

			// 新密码输入
			newPwdInput(e) {
				if (this.oldPass != '' && !this.pwdIsHave) {
					this.checkPass();
				}
				this.newPass = e.detail.value;
			},

			// 新密码再次输入
			confirmNewPwdInput(e) {
				if (this.oldPass != '' && !this.pwdIsHave) {
					this.checkPass();
				}
				this.confirmNewPass = e.detail.value;
			},

			// 校验用户原密码
			checkPass() {
				util.request(api.checkPass, {
					oldPass: md5Util.hexMD5(this.oldPass),
					userId: this.userId
				}, 'POST', undefined, 0, false).then((res) => {
					this.pwdIsHave = res.datas;
					if (!this.pwdIsHave) {
						util.toast("原密码错误！");
					}
				})
			},

			// 提交
			submit() {
				if (!this.oldPass) {
					util.toast("请输入原密码！");
					return
				}
				if (!this.newPass) {
					util.toast("请输入新密码！");
					return
				}
				if (!this.confirmNewPass) {
					util.toast("请再次输入新密码！");
					return
				}
				if (this.oldPass != '' && !this.pwdIsHave) {
					this.checkPass();
				}
				if (this.newPass != this.confirmNewPass) {
					util.toast("确认密码与新密码不对！");
					return
				}
				if (!this.pwdIsHave) {
					util.toast("原密码错误！");
					return
				}
				util.request(api.updatePass, {
					oldPass: md5Util.hexMD5(this.oldPass),
					userId: this.userId,
					newPass: md5Util.hexMD5(this.newPass)
				}).then((res) => {
					if (res.status == 200) {
						uni.removeStorageSync("token");
						uni.removeStorageSync("name");
						uni.removeStorageSync("phone");
						uni.removeStorage({
							key: "user",
							success() {
								// location.href = util.judgeObj().loginPage
							}
						})
					} else {
						util.toast(res.message);
					}
				})
			}
		},
		onShow() {
			//用户信息
			this.user = uni.getStorageSync("user");
			if (this.user.id != null) {
				this.userId = this.user.id;
			}
		},
	}
</script>

<style>
	.password {
		background: url('@/static/images/edit_pass_bg.png');
		background-size: 100% 100%;;
	}
	.password uni-input {
		border:none;
	}
	/deep/ .password .uni-input-input, .uni-input-placeholder {
		font-size: 24rpx!important;
	}
	.password .divider {
		border:none;
		border-bottom: 1px solid #f5f5f5;
	}
	.tit-cen {
		position: absolute;
		top: 15px;
		color: #fff;
		z-index: 999;
		text-align: center;
		width: 90%;
		font-size: 18px;
		left: 5%;
		color: #fff;
	}
	.tit-cen image {
		width:14px;
		height:20px;
		float:left;
	}
	.white-bc {
		position:absolute;
		width:96%;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
	}

	.edt_item {
		display: flex;
		flex-direction: row;
		margin: 60rpx 0;
		align-items: center;
		background-color: #fff;
		border:1px solid #A5A9B0;
	}
	.edt_item image {
		width: 48rpx;
		height: 48rpx;
		margin:20rpx;
	}
	.edt_item uni-input {
		width:100%;
	}
	.divider {
		height:2rpx;
		display: inline-block;
		width: 100%;
		border: 1px solid #f5f5f5;
	}

	.sure-btn {
		width: 100%;
		height: 76rpx;
		background: #3B5FD5;
		color: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		margin: 40rpx auto;
		margin-top:80px;
		text-align: center;
		line-height: 76rpx;
	}
</style>
